<template>
  <div>
    <el-date-picker
      v-model="dateRange"
      type="daterange"
      range-separator="至"
      start-placeholder="开始日期"
      end-placeholder="结束日期"
      @change="fetchData()"
      value-format="yyyy-MM-dd"
    >
    </el-date-picker>
    <div>
      <el-table :data="tableData" border style="width: 1202px;float: left;">
        <el-table-column prop="date" label="浏览人数" width="100">
        </el-table-column>
        <el-table-column prop="name" label="下单人数" width="100">
        </el-table-column>
        <el-table-column prop="address" width="100" label="订单数">
        </el-table-column>
        <el-table-column prop="name" label="下单件数" width="100">
        </el-table-column>
        <el-table-column prop="name" label="有效订单数" width="100">
        </el-table-column>
        <el-table-column prop="name" label="下单金额" width="100">
        </el-table-column>
        <el-table-column prop="name" label="退款金额" width="100">
        </el-table-column>
        <el-table-column prop="name" label="付款人数" width="100">
        </el-table-column>
        <el-table-column prop="name" label="付款订单数" width="100">
        </el-table-column>
        <el-table-column prop="name" label="付款件数" width="100">
        </el-table-column>
        <el-table-column prop="name" label="付款金额" width="100">
        </el-table-column>
        <el-table-column prop="name" label="平均单价" width="100">
        </el-table-column>
      </el-table>
      <div id="main" style="width: 200px;height:300px;float: right;"></div>
    </div>

    <div style="margin-top:200px"></div>
    <div id="broken" style="width:100%;height:400px"></div>
  </div>
</template>

<script>
import echarts from "echarts";
// import $ from "jquery";
// // eslint-disable-next-line
// const _hmt = _hmt || []
// window._hmt = _hmt;
// $(function() {
//   const hm = document.createElement("script");
//   hm.src = "https://hm.baidu.com/hm.js?958693ecaec3b1dea66bb6af2aa21389";
//   const s = document.getElementsByTagName("script")[0];
//   s.parentNode.insertBefore(hm, s); // eslint-disable-next-line
// })()

export default {
  data() {
    return {
      tableData: [], // 交易统计
      dateRange: [] // 日期选择器绑定的变量
    };
  },
  created() {},
  methods: {
    fetchData() {
      // 初始化echarts容器
      const myChart = echarts.init(document.getElementById("main"));

      const myChart2 = echarts.init(document.getElementById("broken"));

      let option = {
        tooltip: {
          trigger: "item",
          formatter: "{a} <br/>{b} : {c}%"
        },
        series: [
          {
            name: "漏斗图",
            type: "funnel",
            left: "10%",
            top: 0,
            // x2: 80,
            bottom: 100,
            width: "100%",
            // height: {totalHeight} - y - y2,
            min: 0,
            max: 100,
            minSize: "0%",
            maxSize: "100%",
            sort: "descending",
            gap: 2,
            label: {
              show: true,
              position: "inside"
            },
            labelLine: {
              length: 10,
              lineStyle: {
                width: 1,
                type: "solid"
              }
            },
            itemStyle: {
              borderColor: "#fff",
              borderWidth: 1
            },
            emphasis: {
              label: {
                fontSize: 20
              }
            },
            data: [
              { value: 60, name: "浏览" },
              { value: 40, name: "下单" },
              { value: 20, name: "付款" }
            ]
          }
        ]
      };

      let option2 = {
        legend: {},
        tooltip: {
          trigger: "axis",
          showContent: false
        },
        dataset: {
          source: [
            ["product", "2012", "2013", "2014", "2015", "2016", "2017"],
            ["Matcha Latte", 41.1, 30.4, 65.1, 53.3, 83.8, 98.7],
            ["Milk Tea", 86.5, 92.1, 85.7, 83.1, 73.4, 55.1],
            ["Cheese Cocoa", 24.1, 67.2, 79.5, 86.4, 65.2, 82.5],
            ["Walnut Brownie", 55.2, 67.1, 69.2, 72.4, 53.9, 39.1]
          ]
        },
        xAxis: { type: "category" },
        yAxis: { gridIndex: 0 },
        grid: { top: "55%" },
        series: [
          { type: "line", smooth: true, seriesLayoutBy: "row" },
          { type: "line", smooth: true, seriesLayoutBy: "row" },
          { type: "line", smooth: true, seriesLayoutBy: "row" },
          { type: "line", smooth: true, seriesLayoutBy: "row" },
          {
            type: "pie",
            id: "pie",
            radius: "30%",
            center: ["50%", "25%"],
            label: {
              formatter: "{b}: {@2012} ({d}%)"
            },
            encode: {
              itemName: "product",
              value: "2012",
              tooltip: "2012"
            }
          }
        ]
      };

      myChart.on("updateAxisPointer", function(event) {
        var xAxisInfo = event.axesInfo[0];
        if (xAxisInfo) {
          var dimension = xAxisInfo.value + 1;
          myChart.setOption({
            series: {
              id: "pie",
              label: {
                formatter: "{b}: {@[" + dimension + "]} ({d}%)"
              },
              encode: {
                value: dimension,
                tooltip: dimension
              }
            }
          });
        }
      });

      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option);
      myChart2.setOption(option2);
    }
  }
};
</script>

<style scoped></style>
